<template>
  <div class="chatlogin">
    <el-card class="box-card">
      <h1>“宠爱有家”客服登录</h1>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="店铺编号" prop="storeid">
          <el-input v-model="ruleForm.storeid" />
        </el-form-item>
        <el-form-item label="客服昵称" prop="username">
          <el-input v-model="ruleForm.username" />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { inject, reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import restApi from "../../api/restapi";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
let goEasy = inject("goEasy")

interface RuleForm {
  storeid: string;
  username: string;
  password: string;
}

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  storeid: "mhy",
  username: "银狼",
  password: "1234",
});

const rules = reactive({
  storeid: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
  username: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
  password: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      Login();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const Login = () => {
  let agent = restApi.findAgent(
    ruleForm.storeid,
    ruleForm.username,
    ruleForm.password
  );
  if (agent) {
    // currentAgents = agent;
    // let csteam = goEasy.im.csteam("shop01"); //将要从哪个团队或者商家下线
    // csteam.offline({
    //   onSuccess: () => {
    //     console.log("已下线");
    //   },
    //   onFailed: (error) => {
    //     console.log("下线失败,error:", error);
    //   },
    // });
    localStorage.setItem("currentAgents", JSON.stringify(agent));
    router.push({ path: "/customer/conversations" });
  } else {
    ElMessage.error("信息填写错误");
  }
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

<style scoped lang="scss">
.chatlogin {
  height: 100%;
  background: url(./img/loginbg.jpg);
  .box-card {
    color: #fff;
    width: 580px;
    height: 340px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    h1 {
      text-align: center;
    }
    :deep(.el-form) {
      .el-form-item {
        margin: 30px 0;
        .el-form-item__label {
          color: #fff;
        }
      }
    }
  }
}
</style>


























<!-- <template>
  <div class="login">
    <div class="login-container">
      <div class="login-main">
        <div class="login-header">
          <div>客服后台示例</div>
        </div>
        <div class="login-form">
          <div class="form-item">
            <div class="selected-area" @click="switchSelectorVisible">
              <div class="selected-content" v-if="agentSelector.selectedAgent">
                <img :src="agentSelector.selectedAgent.shop.avatar"/>
                <div>{{agentSelector.selectedAgent.shop.name + ' - ' + agentSelector.selectedAgent.name}}</div>
              </div>
              <div class="selected-content" v-else>
                <div>请选择用户</div>
              </div>
              <img class="selected-icon rotate" src="../../assets/images/up.png"/>
            </div>
            <div v-if="agentSelector.visible" class="dialog-area">
              <div class="dialog-list">
                <div class="dialog-list-item" v-for="(agent, index) in agentSelector.agents" :key="index"
                     @click="selectAgent(agent)">
                  <img class="dialog-list-item-avatar" :src="agent.shop.avatar"/>
                  <div>{{ agent.shop.name + ' - ' + agent.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-item">
            <input v-model="password.value" class="password-input" placeholder="请输入密码" :type="password.visible ? 'text':'password'"/>
            <img class="password-image" @click="switchPasswordVisible" src="../../assets/images/visible.png"/>
          </div>
          <div class="form-item">
            <button class="form-item-btn" @click="login">登录</button>
          </div>
          <div v-show="errorVisible" class="form-error">账号或密码错误!</div>
        </div>
        <div class="version">{{ version }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import restApi from '../../api/restapi';
  // import { version } from '../../package.json';

  export default {
    name: 'Login',
    data() {
      return {
        version: "1.0.0",
        agentSelector: {
          agents: [],
          visible: false,
          selectedAgent: null
        },

        username: '',
        password: {
          visible: false,
          value: '123'
        },

        errorVisible: false,
      };
    },
    created() {
      this.agentSelector.agents = restApi.findAgents();
    },
    methods: {
      switchSelectorVisible() {
        this.agentSelector.visible = !this.agentSelector.visible;
      },
      selectAgent(agent) {
        this.agentSelector.visible = false;
        this.agentSelector.selectedAgent = agent;
        this.username = agent.name;
      },
      switchPasswordVisible() {
        this.password.visible = !this.password.visible;
      },


      login() {
        if (this.username.trim() !== '' && this.password.value.trim() !== '') {
          let agent = restApi.findAgent(this.username, this.password.value);
          if (agent) {
            this.currentAgents = agent;
            localStorage.setItem("currentAgents",JSON.stringify(agent))
            this.$router.push({path: '/customer/conversations'});
            return;
          }
        }
        this.errorVisible = true;
      }
    },
  };
</script>

<style scoped>
  .login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-container {
    border-radius: 12px;
  }

  .login-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .login-header {
    width: 300px;
    text-align: center;
    font-size: 25px;
    font-weight: 500;
    color: #d02129;
  }

  .login-form {
    width: 300px;
  }

  .form-item {
    position: relative;
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .selected-area {
    width: 280px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    cursor: pointer;
  }

  .selected-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    height: 37px;
  }

  .selected-content img {
    width: 35px;
    height: 35px;
    margin-right: 15px;
    border-radius: 50%;
  }

  .selected-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }

  .rotate {
    transform-origin: center;
    transform: rotate(180deg);
  }

  .dialog-area {
    position: absolute;
    top: 50px;
    left: 0;
    width: 300px;
    background: #FFFFFF;
    border: 1px solid #DCDFE6;
    z-index: 99;
  }

  .dialog-list-item {
    width: 100%;
    margin: 5px 0;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .dialog-list-item-avatar {
    width: 35px;
    height: 35px;
    margin: 0 15px;
    border-radius: 50%;
  }

  .password-input {
    width: 280px;
    height: 37px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  .password-image {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
  }

  .form-item-btn {
    width: 100%;
    color: #FFFFFF;
    background-color: #d02129;
    border: none;
    height: 35px;
    cursor: pointer;
    text-align: center;
    font-size: 14px;
    border-radius: 4px;
  }

  .form-error {
    color: #d02129;
    margin-bottom: 22px;
  }

  .version {
    color: #FFFFFF;
  }

</style> -->
